<template>
  <view class="content-page">
    <view
      :style="{
        height: CustomBarRpx + 'rpx',
        paddingTop: StatusBarRpx + 'rpx',
      }">
      <view
        :style="{ height: CustomBarRpx + 'rpx' }"
        class="header-nav">
        <u-icon
          name="arrow-left"
          size="36"
          @click="goback"></u-icon>
      </view>
    </view>
    <view class="login-content">
      <view class="login-content-0">
        <image
          :src="app_logo"
          mode=""></image>
      </view>
      <view class="login-content-1">{{ appName }}</view>
      <view class="login-content-2">
        <u-form
          :model="dataForm"
          ref="uForm">
          <u-form-item label-width="120">
			<picker :value="selectedOption" mode="selector" :range="options" @change="onSelectorChange">
				<text>{{options[selectedOption]}}</text>
				<u-icon name="arrow-down" size="22" class="picker-icon" />
			</picker>
            <u-input
              v-model="dataForm.phone"
              :placeholder="$t('请输入手机号')" />
          </u-form-item>
          <u-form-item
            :label="$t('验证码')"
            label-width="120">
            <u-input
              v-model="dataForm.code"
              :placeholder="$t('请输入验证码')" />
            <block slot="right">
              <u-verification-code
                :seconds="seconds"
                ref="uCode"
                @change="codeChange"></u-verification-code>
              <text
                @tap="getCode"
                style="color: #000; font-weight: 400"
                >{{ tips }}</text
              >
            </block>
          </u-form-item>
        </u-form>
        <!-- <u-input v-model="value" :type="type" :border="true"  class="uInput" :custom-style="customStyle"/>
				<u-input v-model="value" :type="type" :border="true"  class="uInput" :custom-style="customStyle"/> -->
      </view>

      <view
        class="login-content-3"
        @click="submit"
        >{{$t('登录')}}</view
      >
      <view
        class="cell-info"
        style="margin-top: 20rpx"
        v-if="share_ma">
        <text>{{$t('邀请人为')}}</text>
        {{ share_ma }}
      </view>
    </view>
    <view class="xieyi">
      <span @click="isAgree = !isAgree">
        <u-icon
          name="checkmark-circle-fill"
          color="#cccccc"
          size="34"
          class="u-icon"
          v-if="!isAgree"></u-icon>
        <u-icon
          name="checkmark-circle-fill"
          color="#2979ff"
          size="34"
          class="u-icon"
          v-if="isAgree"></u-icon>
      </span>
	  {{$t('我已阅读并同意')}}<br>
      
      <text
        class="book-style"
        @click="$.to('/pages/my/agreement?type=user_agreement')"
        >《{{$t('用户协议')}}》</text
      >
      {{$t('和')}}
      <text
        class="book-style"
        @click="$.to('/pages/my/agreement?type=privacy_policy')"
        >《{{$t('隐私协议')}}》</text
      >
    </view>
  </view>
</template>
<script>
// #ifdef APP-PLUS
var qiyuModule = uni.requireNativePlugin("Netease-QiyuModule");
const modal = uni.requireNativePlugin("modal");
import { qy_appKey } from "@/utils/keyControl.js";

//获取分享安装的邀请码
const sharetrace = uni.requireNativePlugin("shoot-sharetrace");

// #endif
export default {
  data() {
    return {
      StatusBar: null,
      CustomBar: null,
      StatusBarRpx: null,
      CustomBarRpx: null,
      appName: "",
      app_logo: "",
      isAgree: false, // 是否同意协议
      customStyle: {
        padding: "10rpx 20rpx",
      },
	  selectedOption: 0,
	  options: ['+66', '+55', '+1', '+91'],
      dataForm: {
        phone: "",
        code: "",
      },
      share_ma: "", // 邀请码

      tips: this.$t('获取验证码'),
      seconds: 30,
	  pageParam: {}
    };
  },
  onReady() {
    // #ifdef APP-PLUS
    //获取安装的参数;
    sharetrace.getInstallTrace((data) => {
      this.share_ma = data.data.paramsData.split("=")[1] || "";
    });
    // #endif
  },
  onLoad() {
    this.getHeight();
    this.getName();
	this.pageParam = this.getUrlParams();
  },
  methods: {
    onSelectorChange(e) {
      this.selectedOption = e.detail.value; // 获取选择的选项
    },
    // 无效代码start
    wuxiaocode_test() {
      let id = params.id;
      if (source === 8) {
        /* 今日限定活动需要zid */
        let zid = params.id; // 限定用
        uni.navigateTo({
          url:
            "/pages/home/kaixiang?id=" +
            params.bindboxid +
            "&music=" +
            this.muteBgMusic +
            "&boxSource=" +
            source +
            "&zid=" +
            params.id,
        });
        return false;
      }
      if (source) {
        uni.navigateTo({
          url:
            "/pages/home/kaixiang?id=" +
            id +
            "&music=" +
            this.muteBgMusic +
            "&boxSource=" +
            source,
        });
      } else {
        uni.navigateTo({
          url: "/pages/home/kaixiang?id=" + id + "&music=" + this.muteBgMusic,
        });
      }
    },
    wuxiaocode_test2() {
      var DEFAULT = {
        id: {
          default: "cropper",
          get: function get() {
            return tmp.id;
          },
          set: function set(value) {
            if (typeof value !== "string") {
              console.error("id：" + value + " is invalid");
            }
            tmp.id = value;
          },
        },
        width: {
          default: 750,
          get: function get() {
            return tmp.width;
          },
          set: function set(value) {
            if (typeof value !== "number") {
              console.error("width：" + value + " is invalid");
            }
            tmp.width = value;
          },
        },
        height: {
          default: 750,
          get: function get() {
            return tmp.height;
          },
          set: function set(value) {
            if (typeof value !== "number") {
              console.error("height：" + value + " is invalid");
            }
            tmp.height = value;
          },
        },
        pixelRatio: {
          default: pixelRatio,
          get: function get() {
            return tmp.pixelRatio;
          },
          set: function set(value) {
            if (typeof value !== "number") {
              console.error("pixelRatio：" + value + " is invalid");
            }
            tmp.pixelRatio = value;
          },
        },
        scale: {
          default: 2.5,
          get: function get() {
            return tmp.scale;
          },
          set: function set(value) {
            if (typeof value !== "number") {
              console.error("scale：" + value + " is invalid");
            }
            tmp.scale = value;
          },
        },
        zoom: {
          default: 5,
          get: function get() {
            return tmp.zoom;
          },
          set: function set(value) {
            if (typeof value !== "number") {
              console.error("zoom：" + value + " is invalid");
            } else if (value < 0 || value > 10) {
              console.error("zoom should be ranged in 0 ~ 10");
            }
            tmp.zoom = value;
          },
        },
        src: {
          default: "",
          get: function get() {
            return tmp.src;
          },
          set: function set(value) {
            if (typeof value !== "string") {
              console.error("src：" + value + " is invalid");
            }
            tmp.src = value;
          },
        },
        cut: {
          default: {},
          get: function get() {
            return tmp.cut;
          },
          set: function set(value) {
            if (typeof value !== "object") {
              console.error("cut：" + value + " is invalid");
            }
            tmp.cut = value;
          },
        },
        boundStyle: {
          default: {},
          get: function get() {
            return tmp.boundStyle;
          },
          set: function set(value) {
            if (typeof value !== "object") {
              console.error("boundStyle：" + value + " is invalid");
            }
            tmp.boundStyle = value;
          },
        },
        onReady: {
          default: null,
          get: function get() {
            return tmp.ready;
          },
          set: function set(value) {
            tmp.ready = value;
          },
        },
        onBeforeImageLoad: {
          default: null,
          get: function get() {
            return tmp.beforeImageLoad;
          },
          set: function set(value) {
            tmp.beforeImageLoad = value;
          },
        },
        onImageLoad: {
          default: null,
          get: function get() {
            return tmp.imageLoad;
          },
          set: function set(value) {
            tmp.imageLoad = value;
          },
        },
        onBeforeDraw: {
          default: null,
          get: function get() {
            return tmp.beforeDraw;
          },
          set: function set(value) {
            tmp.beforeDraw = value;
          },
        },
      };
    },
    // 无效代码end
    /* 登录 */
    submit() {
      if (!this.isAgree) {
        this.$tip.tip(this.$t('请先同意用户协议和隐私协议'));
        return;
      }
      if (this.$tip.phoneReg.test(this.dataForm.phone) == false) {
        this.$tip.tip(this.$t('请填写正确的手机号'));
        return;
      }
      if (this.dataForm.code == "") {
        this.$tip.tip(this.$t('请填写验证码'));
        return;
      }
	  if (this.share_ma == "") {
	  	this.share_ma = this.pageParam.share_ma
	  }
      this.$http({
        url: "api/login/mobile_login",
        data: {
          mobile: this.dataForm.phone,
          captcha: this.dataForm.code,
          share_ma: this.share_ma,
        },
      })
        .then((res) => {
          if (res.data.code == 1) {
            uni.setStorageSync("user_token", res.data.data.token);
            uni.setStorageSync("user", res.data.data.member_data);
            uni.switchTab({
              url: "/pages/tabBar/home",
            });
            this.initSetUserInfo(res.data.data.member_data);
            uni.$emit("updataUser");
          } else {
            this.$tip.tip(res.data.msg);
          }
        })
        .catch((err) => {});
    },
    //获取ip
    getIp() {
      this.$http({
        url: "api/Ios/get_ip",
      })
        .then((res) => {
          if (res.data.code == 1) {
            //res.data.data.ip
            return res.data.data.clear;
          }
        })
        .catch((err) => {});
    },
    /* 初始化七鱼 */
    initSetUserInfo(userInfo) {
      this.testLogout();
      const { id, username, mobile, image, create_time, update_time } =
        userInfo;
      qiyuModule.initSdk({
        appKey: qy_appKey,
        appName: "叮当盲盒",
        pkCerName: "PushKit推送证书名；对应云信的pkCername",
      });
      qiyuModule.setUserInfo(
        {
          userId: id || this.getIp(),
          data: JSON.stringify([
            {
              key: "real_name",
              value: username,
            },
            {
              key: "mobile_phone",
              hidden: true,
              value: mobile,
            },

            {
              key: "avatar",
              value: image,
            },
            {
              index: 5,
              key: "reg_date",
              label: this.$t('注册日期'),
              value: create_time,
            },
            {
              index: 6,
              key: "last_login",
              label: this.$t('上次登录时间'),
              value: update_time,
            },
          ]),
        },
        (ret) => {}
      );
    },

    /* 验证码相关 */
    codeChange(text) {
      // this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (this.$tip.phoneReg.test(this.dataForm.phone) == false) {
          this.$tip.tip(this.$t('请填写正确的手机号'));
          return;
        }
        if (!this.isAgree) {
          this.$tip.tip(this.$t('请先同意用户协议和隐私协议'));
          return;
        }
        // 模拟向后端请求验证码
        uni.showLoading({
          title: this.$t('正在获取验证码'),
        });
        this.$http({
          url: "api/login/send_sms",
          data: {
            event: "login",
			countryCode: this.options[this.selectedOption],
            mobile: this.dataForm.phone,
          },
        })
          .then((res) => {
            if (res.data.code == 1) {
              uni.hideLoading();
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            } else {
              this.$tip.tip(res.data.msg);
            }
          })
          .catch((err) => {});
      } else {
        this.$u.toast(this.$t('倒计时结束后再发送'));
      }
    },
    /* 程序 */
    getName() {
      this.$http({
        url: "api/common/get_general",
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.appName = res.data.data.app_name;
            this.app_logo = res.data.data.app_logo;
          }
        })
        .catch((err) => {});
    },

    /* 返回 */
    goback() {
      // uni.navigateBack();
	  uni.navigateTo({
	  	url: "/pages/my/login"
	  })
    },

    /* 获取高度 */
    getHeight() {
		let _that = this;
		uni.getSystemInfo({
			success: function (e) {
				let StatusBar = 0,
					CustomBar = 0,
					CustomVal = 0,
					StatusBarRpx = 0,
					CustomBarRpx = 0,
					unitRatioVal = 0;
				// #ifndef MP
				StatusBar = e.statusBarHeight;
				if (e.platform == "android") {
					CustomBar = e.statusBarHeight + 50;
				} else {
					CustomBar = e.statusBarHeight + 45;
				}
				// #endif
				// #ifdef MP-WEIXIN
				StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				CustomVal = custom;
				CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// #endif
				// #ifdef MP-ALIPAY
				StatusBar = e.statusBarHeight;
				CustomBar = e.statusBarHeight + e.titleBarHeight;
				// #endif
				let unitRatio = 750 / uni.getSystemInfoSync().windowWidth;
				StatusBarRpx = StatusBar * unitRatio;
				CustomBarRpx = CustomBar * unitRatio;
				unitRatioVal = unitRatio;
				_that.StatusBar = StatusBar; //状态栏高度(px)
				_that.CustomBar = CustomBar; //整个标题栏高度(px)
				_that.StatusBarRpx = StatusBarRpx; //状态栏高度(rpx)
				_that.CustomBarRpx = CustomBarRpx; //整个标题栏高度(rpx)
			},
		});
    },
	
	// 定义一个函数来解析URL参数
	getUrlParams() {
	  const queryString = window.location.search;
	  const urlParams = new URLSearchParams(queryString);
	  const params = {};
	
	  for (const [key, value] of urlParams.entries()) {
	    params[key] = value;
	  }
	
	  return params;
	},
  },
};
</script>

<style lang="scss" scoped>
.content-page {
  display: flex;
  flex-direction: column;
  height: 90vh;
  justify-content: space-between;
  background-image: url("https://img.alicdn.com/imgextra/i3/2215984279448/O1CN0168Uvu92JfEvxMm9rv_!!2215984279448.png");
  background-size: 100% 100%;
}
.header-nav {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.login-content {
  width: 750rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  // margin-top: 100rpx;
  .login-content-0 {
    width: 180rpx;
    height: 180rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .login-content-1 {
    font-size: 30rpx;
    color: #2c2c2c;
    font-weight: 400;
    margin-top: 20rpx;
  }
  .login-content-2 {
    font-size: 36rpx;
    color: #2c2c2c;
    font-weight: 400;
    margin-top: 70rpx;
    font-weight: bold;
    width: 600rpx;
    .uInput {
      margin-bottom: 20rpx;
    }
  }
  .login-content-3 {
    width: 600rpx;
    height: 100rpx;
    background-color: #2c2c2c;
    color: #fff;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
  }
  .login-content-4 {
    font-size: 26rpx;
    color: #999;
    margin-top: 100rpx;
  }
  .login-content-5 {
    display: flex;
    width: 340rpx;
    justify-content: space-between;
    margin-top: 50rpx;
    margin-bottom: 20rpx;
    &-0 {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      width: 120rpx;
      height: 120rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(44, 44, 44, 0.27);
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}
.xieyi {
  width: 690rpx;
  font-size: 24rpx;
  margin: 0 auto;
  color: #7b7b7b;
  line-height: 36rpx;
  text-align: center;
  align-items: center;
  .u-icon {
    margin-right: 8rpx;
    position: relative;
    top: 2px;
  }
  .book-style {
    color: #000;
  }
}
.picker-icon {
	margin-left: 15rpx;
	margin-right: 40rpx;
}
</style>
